<template>
  <div class="containerWrapper">
    <div class="formWrapper">
      层数：<el-input-number
        v-model.number="ceng"
        placeholder="层"
      ></el-input-number>
      每层行数：<el-input-number
        v-model.number="hang"
        placeholder="行"
      ></el-input-number>
      每层列数：<el-input-number
        v-model.number="lie"
        placeholder="列"
      ></el-input-number>
    </div>

    <!-- 设备外部区域 -->
    <div ref="wrapperBox" class="wrapperBox">
      <div
        class="cengBox"
        v-for="(item, idx) in ceng"
        :key="idx"
        :style="`width: 100%;height: ${wrapperBoxHeight / ceng}px;`"
      >
        <div style="height: 20px">第{{ idx + 1 }}层</div>
        <div class="deviceList">
          <div
            v-for="(item, idx) in hang * lie"
            :key="idx"
            :style="`width: ${
              (wrapperBoxWidth - 10 * (lie + 1) - lie * 2) / lie
            }px;height: ${
              (wrapperBoxHeight - hang * 2 - 2) / ceng / hang - 20
            }px;`"
            class="deviceItem"
          >
            设备：{{ idx + 1 }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

// 技术总结参考 ./readme.md
<script>
export default {
  name: "vedio",
  data() {
    return {
      ceng: 3,
      hang: 3,
      lie: 4,
      wrapperBoxWidth: "",
      wrapperBoxHeight: "",
    };
  },
  mounted() {
    // 获取最外侧盒子的宽高
    console.log("width:", this.$refs["wrapperBox"].offsetWidth);
    console.log("height:", this.$refs["wrapperBox"].offsetHeight);
    this.wrapperBoxWidth = this.$refs["wrapperBox"].offsetWidth;
    this.wrapperBoxHeight = this.$refs["wrapperBox"].offsetHeight;
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.containerWrapper {
  padding: 20px;
  width: 75%;
  height: 100%;
  overflow: scroll;
  .formWrapper {
    height: 70px;
  }
  .wrapperBox {
    width: 100%;
    height: calc(100% - 200px);
    border: 1px solid red;
    .cengBox {
      border: 1px solid pink;
      .deviceList {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;

        .deviceItem {
          border: 1px solid green;
          margin-top: 8px;
          margin-left: 8px;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
